<template>
  <div @click.stop="" class="TUI-Emoji">
    <div v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
      <img :data-name="item.emojiName" :title="item.emojiName" class="emoji-image" :src="item.url" @click.stop="handleEnterEmoji" alt="">
    </div>
  </div>
</template>

<script>
import { emojiName, emojiUrl, emojiMap } from '@/utils/emojiMap';
export default {
  name: "Emoji",
  data() {
    return {
      emojiList: []
    };
  },
  beforeMount() {
    for (let i = 0; i < emojiName.length; i++) {
      this.emojiList.push({
        emojiName: emojiName[i],
        url: emojiUrl + emojiMap[emojiName[i]]
      });
    }
  },
  methods: {
    handleEnterEmoji(event) {
      this.$emit('enterEmoji', {
        detail: {
          message: event.currentTarget.dataset.name
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.TUI-Emoji {
  position: absolute;
  left: 0;
  bottom: 46px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 500px;
  height: 240px;
  background: #fff;
  overflow-y: scroll;
  margin-left: 20px;
  border-radius:6px;
  box-shadow: 0 0 10px 3px #efefef;
}

.TUI-emoji-image {
  width:35px;
  height: 35px;
  margin: 5px;
  padding:5px;
}
.TUI-emoji-image:hover {
  background: #efefef;
  border-radius: 4px;
}

.emoji-image {
  width: 100%;
  height: 100%;
}

</style>
